{extend name="../../base/view/common/base" /}
{block name="style"}
{include file="/approve/add_style" /}
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <h3 class="pb-3">采购申请审批</h3>
    {eq name="$id" value="0"}
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray-2">名称<font>*</font></td>
            <td colspan="2"><input type="text" name="name" value="" autocomplete="off" placeholder="请输入名称"
                                   lay-verify="required" lay-reqText="请输入名称" class="layui-input"></td>


        <td class="layui-td-gray-2">期望交互日期<font>*</font></td>
        <td colspan="2">
            <input id="detail_time" name="detail_time" autocomplete="off" readonly class="layui-input" value=""
                   readonly lay-verify="required" placeholder="请选择时间" lay-reqText="请选择时间">
        </td>
        </tr>

        <tr>
            <td class="layui-td-gray">采购选项<font>*</font></td>
            <td colspan="5">
                <table id="interfix" class="layui-table layui-table-min">
                    <tr>
                        <th width="120">采购商品</th>
                        <th width="100">数量</th>
                        <th>备注信息</th>
                        <th width="60">操作</th>
                    </tr>
                    <tr class="more_interfix">

                        <td style="text-align:left">
                            <select name="product_sn[]" lay-search lay-verify="required" lay-reqText="请选择商品" class="layui-select">
                                <option value="">请选择</option>
                                {volist name="$product_list" id="vo"}
                                <option value="{$vo.product_sn}!!{$vo.product_name}">{$vo.product_sn}_{$vo.product_name}</option>
                                {/volist}
                            </select>
                        </td>

                        <td>
                            <input type="text" name="num[]" value="" class="layui-input" lay-verify="required|number"
                                   lay-reqText="请完善数量">
                        </td>

                        <td><input type="text" name="remarks[]" class="layui-input" value="">
                            <input type="hidden"
                                   name="expense_id[]"
                                   class="layui-input"
                                   value="0"></td>
                        <td><a class="layui-btn layui-btn-danger layui-btn-xs" data-id="0" lay-event="del">删除</a></td>
                    </tr>
                </table>
                <div class="pt-2">
                    <button class="layui-btn layui-btn-sm" type="button" id="addInterfix">+ 采购选项</button>
                </div>
            </td>
        </tr>

        <tr>
            <td class="layui-td-gray">采购事由<font>*</font></td>
            <td colspan="5">
                <textarea name="content" placeholder="请输入采购事由" class="layui-textarea" lay-verify="required"
                          lay-reqText="请输入采购事由"></textarea>
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray">备注</td>
            <td colspan="5">
                <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray">
                <div class="layui-input-inline">附件</div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-xs" id="upFile"><i class="layui-icon"></i>
                    </button>
                </div>
            </td>
            <td colspan="5" style="line-height:inherit">
                <div class="layui-row" id="fileList">
                    <input type="hidden" data-type="file" name="file_ids" value="">
                </div>
            </td>
        </tr>
    </table>
    {else/}
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray-2">名称<font>*</font></td>
            <td colspan="2"><input type="text" name="name" value="{$detail.name}" autocomplete="off"
                                   placeholder="请输入物品名称" lay-verify="required" lay-reqText="请输入物品名称"
                                   class="layui-input"></td>
            <td class="layui-td-gray-2">期望交互日期<font>*</font></td>
            <td colspan="2">
                <input id="detail_time" name="detail_time" autocomplete="off" readonly class="layui-input"
                       value="{$detail.detail_time}" readonly lay-verify="required" placeholder="请选择时间"
                       lay-reqText="请选择时间">
            </td>
        </tr>


        <td class="layui-td-gray">采购选项<font>*</font></td>
        <td colspan="5">
            <table id="interfix" class="layui-table layui-table-min">
                <tr>
                    <th width="120">采购商品</th>
                    <th width="100">数量</th>
                    <th>备注信息</th>
                    <th width="60">操作</th>
                </tr>
                {volist name="$detail.product_info" id="val"}
                <tr class="more_interfix">
                    <td style="text-align:left">
                        <select name="product_sn[]" lay-verify="required" lay-reqText="请选择商品">
                            <option value="">请选择</option>
                            {volist name="$detail.product_list" id="vo"}
                            <option value="{$vo.product_sn}!!{$vo.product_name}" {eq name="$vo.product_sn" value="$val.product_sn"} selected{/eq}>{$vo.product_sn}_{$vo.product_name}</option>
                            {/volist}
                        </select>
                    </td>
                    <td><input type="text" name="num[]" value="{$val.num}" class="layui-input" lay-verify="required|number" lay-reqText="请完善报数量"></td>
                    <td><input type="text" name="remarks[]" class="layui-input" value="{$val.remarks}"><input type="hidden" name="expense_id[]" class="layui-input" value="{$val.id}"></td>
                    <td><a class="layui-btn layui-btn-danger layui-btn-xs" data-id="{$val.id}" lay-event="del">删除</a></td>
                </tr>
                {/volist}
            </table>
            <div class="pt-2">
                <button class="layui-btn layui-btn-sm" type="button" id="addInterfix">+ 采购选项</button>
            </div>
        </td>


        <tr>
            <td class="layui-td-gray">采购事由<font>*</font></td>
            <td colspan="5">
                <textarea name="content" placeholder="请输入采购事由" class="layui-textarea" lay-verify="required"
                          lay-reqText="请输入采购事由">{$detail.content}</textarea>
            </td>
        </tr>

        <tr>
            <td class="layui-td-gray">备注</td>
            <td colspan="5">
                <textarea name="remark" placeholder="请输入备注" class="layui-textarea">{$detail.remark}</textarea>
            </td>
        </tr>

        <tr>

            <td class="layui-td-gray">
                <div class="layui-input-inline">附件</div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-xs" id="upFile"><i class="layui-icon"></i>
                    </button>
                </div>
            </td>

            <td colspan="5" style="line-height:inherit">
                <div class="layui-row" id="fileList">
                    <input type="hidden" name="file_ids" data-type="file" value="{$detail.file_ids}">
                    {notempty name="$detail.file_ids"}
                    {volist name="$detail.fileArray" id="vo"}
                    <div class="layui-col-md4" id="uploadImg{$vo.id}">{:file_card($vo)}</div>
                    {/volist}
                    {/notempty}
                </div>
            </td>

        </tr>
    </table>
    {/eq}
    {include file="/approve/add_flow" /}
</form>
<div id="selectTem" style="display:none;">
    <select name="product_sn[]" lay-search lay-verify="required" lay-reqText="请选择商品" class="layui-select">
        <option value="">请选择</option>
        {volist name="$product_list" id="vo"}
        <option value="{$vo.product_sn}!!{$vo.product_name}">{$vo.product_sn}_{$vo.product_name}</option>
        {/volist}
    </select>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool', 'employeepicker', 'oaTool'];


    function gouguInit() {
        var form = layui.form,
            laydate = layui.laydate;

        layui.oaTool.addFile({
            btn: 'upFile',
            box: 'fileList'
        });


        //添加报销信息表格
        $('#addInterfix').on('click', function () {
            var html = '';
            var selectTem = $('#selectTem').html();

            html += '<tr class="more_interfix">\
                        	<td style="text-align:left">' + selectTem + '</td>\
							<td><input type="text" name="num[]" class="layui-input" lay-verify="required|number" lay-reqText="请完善数量"></td>\
							<td><input type="text" name="remarks[]" class="layui-input"></td>\
							<td><a class="layui-btn layui-btn-danger layui-btn-xs" data-id="0" lay-event="del">删除</a></td>\
						</tr>';
            $("#interfix").append(html).find('.tr-none').remove();
            form.render();
        });

        $('#interfix').on('click', '[lay-event="del"]', function () {
            if ($('.more_interfix').length < 2) {
                layer.msg('至少保留一个选项');
                return false;
            }
            var that = $(this);
            var _id = that.data('id');
            if (_id > 0) {
                layer.confirm('确定删除该数据项？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    $.ajax({
                        url: "/oa/approve/del_product",
                        type: 'post',
                        data: {id: _id},
                        success: function (res) {
                            layer.msg(res.msg);
                            if (res.code == 0) {
                                that.parents(".more_interfix").remove();
                            }
                        }
                    })
                    layer.close(index);
                });
            } else {
                that.parents(".more_interfix").remove();
            }
        });


        if (typeof flowStep === "function") {
            flowStep();
        }

        //日期时间范围
        laydate.render({
            elem: '#detail_time',
            type: 'date',
            format: 'yyyy-MM-dd',
            showBottom: false
        });

    }
</script>
{/block}
<!-- /脚本 -->